<template>
  <div id="piesimple2">
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    chilData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chartDom: null,
      myChart: null,
    };
  },
  watch: {
    'chilData': {
      deep: true,
      handler() {
        this.updata();
      }
    }
  },
  mounted() {
    this.chartDom = document.getElementById('piesimple2');
    this.myChart = echarts.init(this.chartDom, null, {
      renderer: 'svg'
    });
    this.initChart();
  },
  methods: {
    initChart() {
      let option = {
        title: {
          text: '性别分布图/普通用户',
          subtext: 'Gender distribution chart/admin',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.chilData.male, name: '男性' },
              { value: this.chilData.famale, name: '女性' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.myChart.setOption(option);
    },
    updata() {
      let optionData = this.myChart.getOption();
      optionData.series[0].data[0].value = this.chilData.male;
      optionData.series[0].data[1].value = this.chilData.famale;
      this.myChart.setOption(optionData);
    }
  }
};
</script>

<style scoped>
#piesimple2 {
  width: 350px;
  height: 350px;
}
</style>